<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('选项卡 & 面板')" />
<!-- Latest compiled and minified CSS -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/i18n/defaults-cs_CZ.min.js"></script>

</head>
<style type="text/css">
.modal {
	z-index: 99999;
}

.modal-backdrop {
	z-index: 99999;
}

.in {
	z-index: 99999;
}
em{
	color:blue;
}
</style>
<body class="gray-bg">
	<!-- 详细信息模态框（Modal） -->
	<div>
		<div class="modal fade" id="queryInfo" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			 
			<div class="modal-dialog">
				<div class="modal-content animated bounceInRight">
				
					<div class="modal-header">
						<i class="fa fa-clock-o modal-icon"></i>
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<center><em id="beginTime"></em> ————————> <em id="endTime"></em></center>
						
					</div>
					<div class="modal-body">
						
							<p>本次测试结果：</p>
							<i class="fa fa-tags fa-fw"></i>插入<em id="tagsNum"></em>个标签，
							<i class="fa fa-wrench fa-fw"></i>共插入<em id="num"></em>条数据，
							<i class="fa fa-hourglass-end fa-fw"></i>共耗时<em id="duration"></em>秒。
							
						
						
						
					</div>
					<div class="modal-footer">
						<i class="fa  Example of flash  fa-fw"></i>数据率  <em id="rate"></em>条/秒。
						<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					</div>
				
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<div class="wrapper wrapper-content animated fadeIn">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>
								 <em style="color:red">TrendDb</em>插入性能测试：
							</h5>
							<div class="ibox-tools">
								<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
								</a> <a class="dropdown-toggle" data-toggle="dropdown"
									href="tabs_panels.html#"> <i class="fa fa-wrench"></i>
								</a>
								<ul class="dropdown-menu dropdown-user">
									<li><a href="tabs_panels.html#">选项1</a></li>
									<li><a href="tabs_panels.html#">选项2</a></li>
								</ul>
								<a class="close-link"> <i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p style="color:blue">当前测试环境：</p>
							<ul>
								<li>阿里云 windows server 2008 R2(64G)</li>
								<li>CPU: Intel(R) XEON(R) E5-2682，2.50GHZ，2核4线程</li>
								<li>内存: 8 GB</li>
							</ul>
							
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-8">
					<div class="tabs-container">
						<ul class="nav nav-tabs">
							<li class="active"><a data-toggle="tab" href="#tab-1"
								aria-expanded="true"> 单标签多数据插入</a></li>
							<li class=""><a data-toggle="tab" href="#tab-2"
								aria-expanded="false">多标签多数据插入</a></li>
						</ul>
						<div class="tab-content">
							<div id="tab-1" class="tab-pane active">
								<div class="panel-body">
									<p style="color:blue">为了测试流畅，单次测试限制数据量为百万级别<p>
									<form class="form-horizontal m-t" id="singleTagsData">
										<div class="form-group">
											<label class="col-sm-3 control-label">标签：</label>
											<div class="col-sm-8">
												<select class="form-control" name="name">
													<div th:each="arrayS:${names}">
														<option value="${arrayS}">[[${arrayS}]]</option>
													</div>
												</select>
											</div>
										</div>
										
										<div class="form-group">
											<label class="col-sm-3 control-label">数据：</label> <label
												class="col-sm-4"> <input type="radio" checked=""
												value="1" id="optionsRadios1" name="dataType"
												class="">随机数
											</label> <label class="col-sm-4"> <input type="radio"
												value="2" id="optionsRadios2" name="dataType"
												class="">自定义数据
											</label>
										</div>
										<div class="form-group hide" id="customNum">
											<label class="col-sm-3 control-label">自定义数：</label>

											<div class="col-sm-8">
												<input type="number" class="form-control" name="data"
													step=0.0001 max=9999 min=0>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">数据量：</label>
											<div class="col-sm-8">
												<input id="curl" type="text" class="form-control" name="num"
													maxlength="7" oninput="value=value.replace(/[^\d]/g,'')">
											</div>
										</div>


										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-3">
												<button class="btn btn-primary" type="button"
													onclick="singleTagsData()">提交</button>
											</div>
										</div>
									</form>
								</div>
							</div>
							<div id="tab-2" class="tab-pane">
								<div class="panel-body">
									<p style="color:blue">为了测试流畅，单次测试限制数据量为万级别<p>
									<form class="form-horizontal m-t" id="multipleTagsData">
										<div class="form-group">
											<label class="col-sm-3 control-label">标签：</label>
											<div class="col-sm-8">
												<select name="name1"  class="selectpicker show-tick" multiple data-live-search="false" data-actions-box="true">
													<div th:each="arrayS:${names}">
														<option value="${arrayS}">[[${arrayS}]]</option>
													</div>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">数据：</label> <label
												class="col-sm-4"> <input type="radio" checked=""
												value="1" id="optionsRadios3" name="dataType1"
												class="">随机数
											</label> <label class="col-sm-4"> <input type="radio"
												value="2" id="optionsRadios4" name="dataType1"
												class="">自定义数据
											</label>
										</div>
										<div class="form-group hide" id="customNum1">
											<label class="col-sm-3 control-label">自定义数：</label>

											<div class="col-sm-8">
												<input type="number" class="form-control" name="data1"
													step=0.0001 max=9999 min=0>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">数据量：</label>
											<div class="col-sm-8">
												<input type="text" class="form-control" name="num1"
													maxlength="5" oninput="value=value.replace(/[^\d]/g,'')">
											</div>
										</div>


										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-3">
												<button class="btn btn-primary" type="button"
													onclick="multipleTagsData()">提交</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>


					</div>
				</div>


			</div>





		</div>
		<th:block th:include="include :: footer" />
		<script th:inline="javascript">
			$('input:radio[name="dataType"]').change(function() {
				if ($("#optionsRadios1").is(":checked")) {
					$("#customNum").addClass("hide")
				}
				if ($("#optionsRadios2").is(":checked")) {
					$("#customNum").removeClass("hide")
				}
			})
			$('input:radio[name="dataType1"]').change(function() {
				if ($("#optionsRadios3").is(":checked")) {
					$("#customNum1").addClass("hide")
				}
				if ($("#optionsRadios4").is(":checked")) {
					$("#customNum1").removeClass("hide")
				}
			})

			function singleTagsData() {

				$.ajax({
					type : "POST",
					url : "/windpower/functionaltest/singleTagsData",
					data : $("#singleTagsData").serialize(),
					dataType : "json",
					beforeSend : function() {
						$.modal.loading("正在处理中，请稍后...");
					},
					success : function(json) {
						$.modal.closeLoading();
						showQuery(json.result);

					}
				});
			}
			function multipleTagsData() {

				$.ajax({
					type : "POST",
					url : "/windpower/functionaltest/multipleTagsData",
					data : $("#multipleTagsData").serialize(),
					dataType : "json",
					beforeSend : function() {
						$.modal.loading("正在处理中，请稍后...");
					},
					success : function(json) {
						$.modal.closeLoading();
						showQuery(json.result);

					}
				});
			}
			
			function showQuery(data) {
				$("#num").text(data.num.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'));
				$("#beginTime").text(data.beginTime);
				$("#endTime").text(data.endTime);
				$("#rate").text(data.rate.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'));
				$("#duration").text(data.duration.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'));
				$("#tagsNum").text(data.tagsNum);
				// 显示模态框
				$('#queryInfo').modal('show');
			}
		</script>
</body>
</html>
